<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的博客列表</title>
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/list.css" />
    <!-- 引入jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <link rel="icon" href="img/logo1.png" type="image/x-icon" />
  </head>
  <body>
    <div class="navigation">
      <!-- 头像 -->
      <img src="img/logo1.png" />
      <div class="title">我的博客系统</div>

      <div class="space"></div>

      <a href="blog_lists.html">主页</a>
      <a href="blog_wall.html">提问</a>
      <a href="blog_add.html">写博客</a>
      <a href="blog_login.html">退出登录</a>
    </div>

    <!-- 页面主体 -->
    <div class="container">
      <div class="container-left">
        <div class="card">
          <img src="img/avatar.png" />
          <h3></h3>
          <a target="_blank" href="https://gitee.com/carefree-state"
            >代码仓库链接</a
          >
          <div class="counter">
            <span class="h">文章</span>
            <span class="h">分类</span>
          </div>

          <div class="counter">
            <span id="count"></span>
            <span>1</span>
          </div>
        </div>
      </div>

      <div class="container-right">
        <div class="article">
          <!-- <div class="blog">
            <div class="title">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
            <div class="date">xxx / 阅读量：xxx</div>
            <div class="content">xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...</div>
            <div class="thing">
              <a href="#">查看正文</a>
              <a href="#">修改文章</a>
              <div
                id="del"
                style="background-color: rgba(255, 0, 0, 0.6)"
                onclick="del()"
              >
                删除文章
              </div>
            </div> -->
          <!-- </div> -->
        </div>
      </div>
    </div>
    <script>
      var count = 4;
      function init() {
        // 1. 改变左侧窗口
        jQuery(".card img").attr("src", "img/avatar.png");
        jQuery(".card h3").text("作者");
        jQuery(".card a").attr("href", "https://gitee.com/carefree-state");
        jQuery("#count").text(123);
        // 2. 显示文章，构造博客html元素
        for (i = 0; i < count; i++) {
          var art =
            '<div class="blog"><div class="title">' + "【Lorem】" + "</div>";
          art +=
            '<div class="date">' +
            "2023-12-6 11:11:11" +
            " 阅读量：" +
            i +
            "</div>";
          art += '<div class="content">' + "lorem" + "</div>";
          art += '<div class="thing">';
          art += '<a href="blog_detail.html?aid=' + i + '">查看正文</a>';
          art += '<a href="myblog_update.html?aid=' + i + '">修改文章</a>';
          art +=
            '<div id="del" style="background-color: rgba(255, 0, 0, 0.6)" onclick="del(' +
            i +
            ', this)">删除文章</div>';
          art += "</div></div>";
          jQuery(".article").append(jQuery(art));
        }
      }
      init();
      function del(aid, elem) {
        // -1. 确认吗
        if (!confirm("确认删除吗？")) {
          return false;
        }
        count--;
        $(elem).parent().parent().hide();
        if (count == 0) {
          jQuery(".article").html(
            "<h1 style='color: rgba(255, 0, 0, 0.6)'>暂无文章</h1>"
          );
        }
      }
    </script>
  </body>
</html>
